<template>
	<div class="show" v-if="viewModel">
		<div class="show-left">
			<img class="show-left-image" :src="$ala.urlImage(viewModel.product.thumbnailUrl)" alt="">
		</div>

		<div class="show-right">
			<h2 style="font-size:18px;font-weight:bold;opacity:0.9;letter-spacing:1px;"> {{viewModel.product.name}}</h2>
			<div class="show-right-money">
				<p class="show-right-money-first">利润比:<span style="margin-left:21px;font-size:18px;color:red;font-weight: bold;">{{viewModel.product.productStatus}}%-{{viewModel.product.marketPrice}}%</span> <span style="color:red;font-size:12px;">(￥{{viewModel.product.viewCount}}.00-￥{{viewModel.product.stock}}.00)</span></p>
				<p class="show-right-money-secound">建议售价：<span style="font-size:14px">￥{{viewModel.product.price}}.00-￥{{viewModel.product.marketPrice}}.00</span></p>
				<p class="show-right-money-secound">供货价：<span style="margin-left:13px;"><span style="font-size:14px">￥{{viewModel.product.soldCount}}.00</span></span></p>
			</div>

			<div class="show-right-secound">

				<p class="show-right-money-first">运费<span style="margin-left:36px;">包邮</span></p><i class="el-icon-question"></i>
				<p class="show-right-money-secound">总销量：<span style="margin-left:12px"><span style="color:red">{{viewModel.product.productStatus}}</span>件{{viewModel.product.detail.costPrice}}</span><span style="margin-left:15px;">已有<span style="color:red;">{{viewModel.product.regionId}}</span>位分销商上架</span></p>
				<p class="show-right-money-secound">总库存：<span style="margin-left:11px">{{viewModel.product.weight}}</span></p>
			</div>
			<div class="">
				<el-button type="danger" style=" margin-left:19px">添加到店铺</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				viewModel: null
			}
		},
		name: 'get',
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var res = await this.$ala.httpGet('api/product/show', {
					id: 2
				})
				this.viewModel = res
			}
		}
	}
</script>
<style lang="scss" scoped>
	.show-right-money-first,
	.show-right-money-secound {
		margin: 26px 20px;
	}

	.show {
		width: 1200px;
		margin: 0 auto;
		display: flex;

		&-left {
			width: 30%;

			&-img {

				height: 50px;
				width: 260px;
				margin-left: 80px;
				margin-top: 35px;
			}

			&-image {
				width: 260px;
				height: 310px;
				margin-left: 80px;


			}
		}

		&-right {
			width: 70%;
			position: relative;

			&-secound {
				position: relative;

				.el-icon-question {
					position: absolute;
					top: 1%;
					left: 14%;
				}
			}

			&-money {
				height: 120px;
				width: 100%;
				background-color: #fffef9;
				margin-top: 20px;
			}
		}
	}
</style>